<template>
  <div>
    <!-- 数据桥列表 -->
    <div class="w-full flex justify-end items-center mb-1">
      <el-button type="primary" icon="Plus" @click="openDrawer({ id: 0 })"
        >添加</el-button
      >
    </div>

    <el-table
      :data="tableData"
      style="height: calc(100vh - 10rem)"
      class="bridge"
    >
      <el-table-column label="设备外码(接收端)" prop="distOutCode" />
      <el-table-column label="设备" prop="distDeviceSn" />
      <el-table-column label="状态">
        <template #default="{ row }">
          <el-tag :type="row.isOk == 1 ? 'success' : 'danger'">
            {{ row.isOk == 1 ? "启用" : "禁用" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template #default="{ row }">
          <div class="w-full flex flex-col justify-between items-center">
            <el-button type="primary" class="w-full" @click="openDrawer(row)">
              <el-icon><Setting /></el-icon>设置
            </el-button>
            <el-button
              type="danger"
              class="w-full mt-1"
              @click="handleUnbind(row)"
            >
              <el-icon><CircleCloseFilled /></el-icon>解绑
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <PagingQuery
      :page="page"
      :size="size"
      :total="total"
      @getList="getList"
      class="mt-2"
    />

    <el-drawer
      v-model="drawer"
      :title="detail_form.id == 0 ? '添加数据桥信息' : '设置数据桥信息'"
      destroy-on-close
      size="35%"
    >
      <SetBridge
        :detailForm="props.detailForm"
        :detail="detail_form"
        :deviceList="deviceList"
        @handleBack="handleBack"
      />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { cloneDeep } from "lodash";
import PagingQuery from "@/components/PagingQuery.vue";
import SetBridge from "./SetBridge.vue";
import { handleApiResponse } from "@/utils/request.js";
import {
  ListDataBridge,
  ListDeviceByOutCodeAndName,
  DataBridgeBind,
  DataBridgeUnBind,
} from "../../../../../wailsjs/go/api/DeviceApi.js";

onMounted(() => {
  getList();
  getDeviceList();
});

const props = defineProps({
  detailForm: {
    type: Object,
    default: () => {},
  },
});

const page = ref(1);
const size = ref(10);
const total = ref(0);
const tableData = ref([]);
async function getList(e) {
  if (e) {
    page.value = e.page;
    size.value = e.size;
  }
  handleApiResponse(() =>
    ListDataBridge({
      page: page.value,
      size: size.value,
      srcOutCode: props.detailForm.outCode,
    })
  ).then((res) => {
    if (res.code == 0) {
      tableData.value = res.data.list || [];
      total.value = res.data.total || 0;
    }
  });
}

// 1.设置数据桥信息
const drawer = ref(false);
const detail_form = ref({});
const openDrawer = (row) => {
  detail_form.value = cloneDeep(row);
  drawer.value = true;
};
const handleBack = (val) => {
  if (val == 1) {
    getList();
  }
  drawer.value = false;
};

// 2.解绑
const handleUnbind = (row) => {
  ElMessageBox.confirm("您确定要解绑吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    handleApiResponse(() => DataBridgeUnBind(row)).then((res) => {
      if (res.code == 0) {
        ElMessage.success("解绑成功");
        getList();
      }
    });
  });
};

const deviceList = ref([]); // 设备列表
async function getDeviceList() {
  handleApiResponse(() => ListDeviceByOutCodeAndName()).then((res) => {
    if (res.code == 0) {
      deviceList.value = res.data.list || [];
    }
  });
}
</script>

<style scoped lang="scss">
.bridge .el-button + .el-button {
  @apply ml-0;
}
</style>